<template>
	<div class="checkphone" :class="display">
		<group>
		    <x-input v-model="form.phone" type="tel" v-bind:placeholder="accountPlaceHolder">
		    	<img slot="label" class="icon" :src="icon.phone" width="24" height="24">
		    </x-input>
		    <x-input v-model="form.captcha" placeholder="图片验证码">
	        	<img slot="right" :src="captcha" v-on:click="randCaptcha">
	      	</x-input>
		</group>
		<div class="btn">
			<x-button @click.native="check">{{btnText}}</x-button>
		</div>
	</div>
</template>
<script>
	import { XInput, Group, XButton } from 'vux'

	import Axios from '../../config/axios';

	import Va from 'async-validator';

	const formRule = {
	  	phone: [
	  		{type: "string", required: true,message :'请填写手机号码'},
	  		{validator(rule, value, callback, source, options) {
		      	if(!(/^(139|138|137|136|135|134|147|150|151|152|157|158|159|178|182|183|184|187|188|130|131|132|155|156|185|186|145|176|133|153|177|173|180|181|189|170|171)\d{8}$/.test(value))){
	               	callback('手机号码格式错误');
	            }
	            callback();
		    }}
	  	],
	  	captcha : [
	  		{type : "string" , required: true , message : '请填写验证码'},
	  		{ length : 4,message : '验证码4位'}
	  	],
	};

	export default {
		props :{
			accountPlaceHolder :  {
	            type: String,
	            required : true,
	        },
	        btnText :  {
	            type: String,
	            required : true,
	        },
	        display :  {
	            type: String,
	            default : '',
	            required : true,
	        },
	        callback :  {
	            type: Function,
	            required : true,
	        },
		},
		components:{
			XInput,
		    XButton,
		    Group,
        },
        data (){
	        return{
	            form :{
	            	phone : '',
	            	captcha : '',
	            },
	            icon :{
	            	phone : require('../../assets/icon/personal-center.png'),
	            },
	            btn :{
	            	disabled : false,
	            	loading : false,
	            },
	            formBool : true,
	            captcha : '',
	        }
	    },
	    methods: {
	    	//验证数据
			check(){
				this.formValidate();
				if(this.formBool==false) return false;
				this.callback(this.form);
			},
			//数据验证
			formValidate(){
				this.formBool = true;
				new Va(formRule).validate(this.form, (errors, fields) => {
				  	if(errors) {
				  		this.$vux.toast.show({type : 'text', text: errors[0].message});
				  		this.formBool = false;
				  	}
				});
			},
			//随机验证码
			randCaptcha(){
	        	this.captcha = '/captcha?'+new Date().getTime();
	        },
	    },
	    created :function(){
	    	this.randCaptcha();
	    },
	    watch :{
	    	display : function(display){
	    		if(display=='show'){  
	    			this.randCaptcha();
	    		}
	    	}
	    }
	}
</script>
<style>
	.checkphone .icon{padding-right: 15px;}
	.checkphone .btn{margin-top: 15px;}
	.checkphone.show{display: initial;}
	.checkphone.hide{display: none;}
</style>